
<div class="layui-inline" style="margin-left: 15px;">
    <button class="layui-btn"  id="pexcel">新增负责学校</button>
</div>
<div class="layui-form" id="form" lay-filter="agent_schools" >
    <div class="form-cont" >
        <div id="view"></div>
    <div class="form-btn" >
        <input type="button" value="保存" class="layui-btn school_btn" >
    </div>
</div>
<style type="text/css">
    .img-box{
        width: 60px;
        height: 60px;
        border: 1px solid #eee;
        position: relative;
    }
    .img-box img{
        max-width: 100%;
        max-height: 100%;
    }
    .img-box span{
        position: absolute;
        width: 15px;
        line-height: 15px;
        text-align: center;
        font-family: arial;
        top: -8px;
        right: -8px;
        border-radius: 50%;
        background: rgba(0,0,0,.5);
        color:#fff;
        font-size: 12px;
        cursor: pointer;
    }
    .form-cont{
        overflow: auto;
    }
</style>
    <script id="demo" type="text/html">
        {{# layui.each(d.list, function(index, item){     }}
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">负责学校</label>
                <div class="layui-input-inline chooseX" style="">
                    <input type="text" class="layui-input school_name"   value="{{ item.school_name}}" placeholder="请选择学校" class="layui-input" readonly>
                    <input type="hidden" verify="require"  value="{{ item.schools_id}}" name='school_id[]' placeholder="请选择学校" class="layui-input school_id" readonly>
                </div>
                <div class="layui-form-mid">院系</div>
                <div class="layui-input-inline chooseY" style="" >
                    <textarea type="text" class="layui-textarea" style="padding-right: 30px; cursor: pointer;" v-model="detail.institute_name" placeholder="请选择院系" readonly>
{{ item.institute_name}}
                    </textarea>
                    <input type="hidden"  class="institute_id layui-input" value="{{ item.institute_ids}}" name='institute_ids[]'  readonly>
                </div>
                <div class="layui-input-inline deleX" style="" >
                    <a class="layui-btn layui-btn-danger layui-btn-xs" ><i
                            class="layui-icon layui-icon-delete"></i>删除</a>
                </div>
            </div>
        </div>
        {{# });  }}

    </script>




<script>
    layui.use(['form','upload','layer','laytpl'], function(){
        var laytpl = layui.laytpl;
        var $ = layui.$
            ,form = layui.form,upload=layui.upload, layer = layui.layer;
        layui.admin.agent=layui.admin.objData.detail
        form.verify(layui.admin.verify);
        layui.admin.schools={'school_id':'',institute_id:'',institute_ids:[],school_ids:[]};
        //第三步：渲染模版

        var data = { //数据
            "list":layui.admin.agent.schools_name
        }

        var getTpl = demo.innerHTML
            ,view = document.getElementById('view');
        laytpl(getTpl).render(data, function(html){
            view.innerHTML = html;
        });
        //选择负责学校
        $("#view").on('click','.chooseX',function () {
            $("input[type='hidden']").removeClass('xuanze');
           $(this).find("input[type='hidden']").addClass('xuanze');
            layui.admin.schools.school_id= $(this).find("input[type='hidden']").val();
            get_school_id();
            layui.admin.pups=layer.open({
                type:1,
                id:'pup-conts',
                title: '选择负责学校',
                btn:[],
                area: ['800px','600px'],
                success:	 function(layero, index){
                    layui.admin.schools.school_id=$(".xuanze").val();
                    $('#pup-conts').load(layui.conf.views+'record/schoolselect.html?v='+layui.cache.version);
                },end:function () {
                    if ($(".xuanze").val()!=layui.admin.schools.school_id){
                        $(".xuanze").val( layui.admin.schools.school_id);
                        $(".xuanze").parent().parent().find(".school_name").val(layui.admin.schools.school_name);
                        $(".xuanze").parent().parent().find('textarea').val('');
                        $(".xuanze").parent().parent().find('.institute_id').val('');
                    }


                }
            })
        });
        function get_school_id(){
            var school_dom=$(".school_id");
            layui.admin.schools.school_ids=[];
            for (var i =0;i<school_dom.length;i++){

                if ($(school_dom[i]).val()){

                    layui.admin.schools.school_ids.push(parseInt($(school_dom[i]).val()));
                }
            }
            return layui.admin.schools.school_ids;
        }
        function get_institute_id(){
            var institute_dom=$(".institute_id");
             layui.admin.schools.institute_ids=[];
            for (var i =0;i<institute_dom.length;i++){
                // if ($(institute_dom[i]).val()){
                    layui.admin.schools.institute_ids.push($(institute_dom[i]).val());
                // }
            }
            return layui.admin.schools.institute_ids;
        }
        //选择负责学校院系
        $("#view").on('click','.chooseY',function () {
            var dom=$(this);
            var school_id=$(this).parent().find("input[type='hidden']").val();
            get_school_id();
            get_institute_id()
            if (!school_id){
                var lay_index=layer.open({
                    type: 1
                    ,offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    ,id: 'layerDemoauto' //防止重复弹出
                    ,content: '<div style="padding: 20px 100px;">请先选择学校</div>'
                    ,btn: '关闭'
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,yes: function(){
                        layer.close(lay_index);
                    }
                });
                return false;
            }
            layui.admin.schools.school_id=school_id;
            layui.admin.schools.institute_id=dom.parent().find('.institute_id').val();
            layui.admin.schools.institute_name=dom.find('textarea').val();
            layui.admin.pups=layer.open({
                type:1,
                id:'pup-conts',
                title: '选择负责院系',
                btn:[],
                area: ['800px','600px'],
                success:	 function(layero, index){
                    $('#pup-conts').load(layui.conf.views+'record/instituteselect.html?v='+layui.cache.version);
                }
                ,end:function () {
                    // if ($(".xuanze").val()!=layui.admin.schools.school_id){
                    //     $(".xuanze").val( layui.admin.schools.school_id);
                    dom.parent().find('.institute_id').val(layui.admin.schools.institute_id);
                        dom.parent().find('textarea').val(layui.admin.schools.institute_name);

                    // }


                }
            })
        })
        //添加负责学校
        $(".layui-inline").on('click','#pexcel',function () {
            $("#view").append('<div class="layui-form-item">\n' +
                '                <div class="layui-inline">\n' +
                '                <label class="layui-form-label">负责学校</label>\n' +
                '                <div class="layui-input-inline chooseX" style="">\n' +
                '                <input type="text"  class="layui-input school_name"  value="" placeholder="请选择学校"  readonly>\n' +
                '            <input type="hidden" verify="require"  value="" name=\'school_id[]\' placeholder="请选择学校" class="layui-input school_id" readonly>\n' +
                '            </div>\n' +
                '            <div class="layui-form-mid">院系</div>\n' +
                '                <div class="layui-input-inline chooseY" style="" >\n' +
                '                <textarea type="text" class="layui-textarea" style="padding-right: 30px; cursor: pointer;" verify="require"  placeholder="请选择院系" readonly>\n' +
                '        </textarea>\n' +
                '            <input type="hidden" verify="require" class="institute_id layui-input" value="" name=\'institute_ids[]\'  readonly>\n' +
                '            </div>\n' +
                '            <div class="layui-input-inline deleX" style="" >\n' +
                '                <a class="layui-btn layui-btn-danger layui-btn-xs" ><i\n' +
                '        class="layui-icon layui-icon-delete"></i>删除</a>\n' +
                '            </div>\n' +
                '            </div>\n' +
                '            </div>');
        });
        $("#view").on('click','.deleX',function () {
            var dom=$(this);
            var index=layer.open({
                content: '确认移除该学校吗？'
                ,btn: ['确认', '取消']
                ,yes: function(index, layero){
                    //按钮【按钮一】的回调
                    dom.parent().parent().remove();
                    layer.close(index)
                }
                ,btn2: function(index, layero){
                    layer.close(index)
                }

            });


        })
        $('.school_btn').click(function(){

           var school_ids=get_school_id();
            var institute_ids=get_institute_id();
            // if (school_ids.length!=institute_ids.length){
            //     layer.msg('有学校未选择院系，请选择院系');
            //     return false;
            // }
            if (school_ids.length==0){
                layer.msg('请选择学校');
                return false;
            }
            var institute_id_str=institute_ids.length>0?institute_ids.join('-'):'';
            var data={'agent_id':layui.admin.agent.agent_id,'school_ids':school_ids.join('-'),'institute_ids':institute_ids.join('-')};



            layui.admin.formapi('agents/agent_school',data);
        })
        // var forms=new Vue({
        //     el:'#form',
        //      data:{
        //
        //     },
        //     mounted() {
        //         var _this=this;
        //         //初始化
        //         if(this.type!=1) this.detail=layui.admin.objData.detail,this.old_detail=JSON.stringify(layui.admin.objData.detail);
        //         // layui.admin.agent=this.detail;
        //
        //
        //         console.log(this.detail)
        //
        //     },
        //     methods:{
        //
        //
        //         chooseX:function(){
        //             layui.admin.pups=layer.open({
        //                 type:1,
        //                 id:'pup-conts',
        //                 title: '选择负责学校',
        //                 btn:[],
        //                 area: ['800px','600px'],
        //                 success:	 function(layero, index){
        //                     $('#pup-conts').load(layui.conf.views+'record/schoolselect.html?v='+layui.cache.version);
        //                 }
        //             })
        //         },
        //         chooseXy:function(){
        //             if (!layui.admin.agent.school_id){
        //                 var lay_index=layer.open({
        //                     type: 1
        //                     ,offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
        //                     ,id: 'layerDemoauto' //防止重复弹出
        //                     ,content: '<div style="padding: 20px 100px;">请先选择学校</div>'
        //                     ,btn: '关闭'
        //                     ,btnAlign: 'c' //按钮居中
        //                     ,shade: 0 //不显示遮罩
        //                     ,yes: function(){
        //                         layer.close(lay_index);
        //                     }
        //                 });
        //                 return false;
        //             }
        //             layui.admin.pups=layer.open({
        //                 type:1,
        //                 id:'pup-conts',
        //                 title: '选择负责院系',
        //                 btn:[],
        //                 area: ['800px','600px'],
        //                 success:	 function(layero, index){
        //                     $('#pup-conts').load(layui.conf.views+'record/instituteselect.html?v='+layui.cache.version);
        //                 }
        //             })
        //         },
        //         submit:function(){
        //             if(layui.admin.form('#form')){
        //                 if(this.photos){
        //                     this.layer=layer.load(1);
        //                     this.upload.upload();
        //                 }else{
        //                     this.submits();
        //                 }
        //             }
        //         },
        //
        //
        //
        //     }
        // })
    });
</script>
